<template>
  <div>
    <template>
      <el-table ref="tableSort" :data="list" :element-loading-text="elementLoadingText" :height="height" @selection-change="setSelectRows">
        <el-table-column label="序号" show-overflow-tooltip width="95">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="治具号" prop="fixtureNumber" show-overflow-tooltip />
        <el-table-column label="报警内容" prop="alarmContent" show-overflow-tooltip />
        <el-table-column label="报警代码" prop="alarmCode" show-overflow-tooltip />
        <el-table-column label="报警等级" prop="alarmLevel" />
        <el-table-column label="是否有效" prop="alarmUserflag">
          <template #default="{ row }">
            <el-tag :type="row.alarmUserflag ? 'success' : 'info'" effect="dark">{{ row.alarmUserflag ? '有效' : '无效' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发生时间" prop="alarmTime" width="200" />
        <el-table-column label="创建时间" prop="createdTime" width="200" />
      </el-table>
      <el-pagination
        :background="background"
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </template>
  </div>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import { getAll } from '@/api/alarm'

  export default {
    props: {},

    data() {
      return {
        imgShow: true,
        list: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
        timeOutID: null,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        const { data, total } = await getAll(this.queryForm)
        this.list = data
        this.total = total
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
    },
  }
</script>
